<div class="slide-show" id="slide-show">
    <img id="image-item" image-id="<?=$image->id?>" src="<?=base_url() . $image->image_path ?>" alt="<?=$image->title_en?>">
</div>
<button id="full_button" style="display: none" onclick="change_image();" >Enter Fullscreen mode (Document)</button>
<script type="text/javascript">

    $(document).ready(function(){

        resize_();
        $(window).resize(function(){resize_()});

        setInterval(function() {
            change_image();
        }, 30000);

    });

    function resize_()
    {
        $('#slide-show').css({
            width: $(window).width(),
            height: $(window).height(),
            overflow:'hidden'
        });

        $('#slide-show img').css({
            width:$(window).width()
        });
    }

    function change_image()
    {
        $.ajax({
            url:'change-image',
            type:'POST',
            data:{id : $('#image-item').attr('image-id')},
            dataType:'json',
            success:function(data)
            {
                if(data.style == '<?php echo $style?>') window.location.replace('<?php echo base_url() . 'home'?>');
                if(data.new)
                {
                    $('#image-item').attr({
                        'image-id' : data.id,
                        'src':data.path
                    })
                }
            }
        });
    }
</script>